<template>
  <f7-page
    infinite
    :infinite-distance="50"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <f7-navbar title="交易记录" back-link=" "></f7-navbar>

    <f7-block-title class="assets-details-record-title">{{$t('m.transactionRecord')}} <f7-link class="iconfont icon-shaixuan" @click="filterTypePopover = true" popover-open=".popover-menu"></f7-link></f7-block-title>

    <no-content-tips v-if="noContent"></no-content-tips>
    <ul class="record-list">
      <li v-for="(item, index) in logs" :key="index">
        <f7-link :href="`/transaction-details/?id=${item.id}&name=${$f7route.query.name}&type=${filterArr[item.home_type]}`">
          <p>{{item.send_address | addressFilter}} <span :class="item.sz_type === '1'?'zhang': 'die'">{{item.sz_type === '1'?'+':'-'}}{{item.money}}</span></p>
          <p><span>{{filterArr[item.home_type]}}</span> {{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
        </f7-link>
      </li>
    </ul>

    <p class="no-more-tips" v-if="logs.length === logsCount">{{$t('m.noMoreTips')}}</p>

    <f7-popover class="popover-menu" :opened="filterTypePopover">
      <ul>
        <li v-for="(item, index) in filterArr" :key="index" @click="handleFilter(index)">
          <f7-link>
            {{item}}
          </f7-link>
        </li>
      </ul>
    </f7-popover>
  </f7-page>
</template>

<script>
  import {financeLog} from "../api/home";

  export default {
    name: "assets-record",
    data() {
      return {
        noContent: false,
        filterTypePopover: false,
        filterArr: [this.$t('m.all'), this.$t('m.income'), this.$t('m.hosting'), this.$t('m.unlock'), this.$t('m.exchange'), this.$t('m.backgroundRecharge'), this.$t('m.withdrawalTransferOut')],
        pageItems: {
          currency_id: this.$f7route.query.id,
          type: 0,
          page: 1,
          num: 10
        },
        type: 0,
        logs: [],
        logsCount: 0,
        showPreloader: true,
        allowInfinite: true
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        financeLog(this.pageItems).then(res => {
          this.logs = res.data;
          this.logsCount = Number(res.count);
          this.showPreloader = false;
        })
      },
      handleFilter(type) {
        console.log(type);
        this.filterTypePopover = false;
        this.pageItems.type = type;
        this.pageItems.page = 1;
        this.init();
      },
      loadMore() {
        if (!this.allowInfinite || this.logs.length >= this.logsCount) {
          this.showPreloader = false
          return;
        }
        this.allowInfinite = false;
        this.pageItems.page++
        financeLog(this.pageItems).then(res => {
          this.logs.push(...res.data);
          this.allowInfinite = true;
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .assets-details-record-title {
    display: flex;
    justify-content: space-between;
    .iconfont {
      font-size: 35px;
    }
  }
  .popover-menu {
    width: 200px;
    overflow: hidden;
    border-radius: 0;
    ul {
      li {
        margin-bottom: 1PX;
        text-align: center;
        overflow: hidden;
        &:last-child {
          margin-bottom: 0;
        }
        .link {
          display: block;
          height: 80px;
          line-height: 80px;
          color: #fff;
          background: $mainColor;
        }
      }
    }
  }

  .record-list {
    padding: 0 $padding;
    li {
      margin-bottom: $padding20;
      .link {
        display: block;
        background: #fff;
        padding: $padding20;
        color: #000;
        p {
          &:first-child {
            display: flex;
            justify-content: space-between;
          }
          &:last-child {
            color: $colorGrey;
            margin-top: 5px;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              padding: 2px 10px;
              border: 1px solid $mainColor;
              margin-right: 10px;
              font-size: 20px;
            }
          }
          span {
            color: $mainColor;
          }
        }
      }
    }
  }
</style>